<script setup>
import { ref, inject, nextTick, onMounted } from "vue";
import request from "@/utils/request.js";
import { dateFormat, formatTotalDateSub } from "@/utils/index.js";

import {
  activitiInfoStore,
  useActivitiInfo,
} from "@/components/Activiti/ApprovalInfo/hooks/use-activiti-info.js";

import { getListHistory } from "@/api/activiti/monitor.js";

/**
 * 工作流数据
 * @description
 * 从依赖注入内获取到的 工作流信息存储值
 * @type { import("vue").Ref< typeof activitiInfoStore > }
 */
const activitiInfo = inject("activitiInfo");

const { instanceId } = useActivitiInfo(activitiInfo);

/** 遮罩层 加载等待效果 默认为否 */
const isLoading = ref(false);

/** 显示搜索条件 */
const showSearch = ref(true);

/** 历史评价
 * @type { import("vue").Ref< import("@/types/HistoricActivity").HistoricActivity[] > }
 */
const historyOpinions = ref([]);

// 警告 接口未返回该值
/** 总条数 */
const total = ref(0);

/** 查询参数
 * @type { import("vue").Ref< import("@/types/HistoricActivity").HistoricActivity > }
 */
const queryParams = ref({
  processInstanceId: instanceId,
  activityName: "",
  assignee: "",
});

const queryForm = ref(null);

function resetForm() {
  nextTick(() => {
    queryForm.value.resetFields();
  });
}

/** 获得历史记录数据 */
async function getHistoryList() {
  isLoading.value = true;

  await getListHistory(queryParams.value)
    .then((res) => {
      historyOpinions.value = res.data;

      historyOpinions.value.forEach((item) => {
        // 前端自己增加的属性值
        item.startTime = dateFormat(item.startTime, "yyyy-MM-dd HH:mm:ss");
        item.endTime = dateFormat(item.endTime, "yyyy-MM-dd HH:mm:ss");
        item.durationInMillis = formatTotalDateSub(item.durationInMillis);
      });
      // TODO: 未来要求后端提供该值 目前不是分页查询接口
      // total.value = res.total;
      // console.log(" ? in getListHistory ", res);
    })
    .catch()
    .finally(() => {
      isLoading.value = false;
    });
}

/** 搜索按钮操作 */
async function handleQuery() {
  await getHistoryList();
}

/** 重置按钮操作 */
async function resetQuery() {
  resetForm();
  await handleQuery();
}

onMounted(async () => {
  await getHistoryList();
});
</script>

<template>
  <section class="approval-HistoryOpinion-root">
    <!-- TODO: 等待开发 需要实现 src\components\Activiti\ApplyAfter\index.vue 文件的表格功能 -->
    <el-form
      ref="queryForm"
      v-show="showSearch"
      label-width="70px"
      :model="queryParams"
      :inline="true"
    >
      <el-form-item label="任务名称" prop="activityName">
        <el-input
          v-model="queryParams.activityName"
          placeholder="请输入任务名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery()"
        />
      </el-form-item>

      <el-form-item label="办理人ID" prop="assignee">
        <el-input
          v-model="queryParams.assignee"
          placeholder="请输入办理人ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery()"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery()"
        >
          搜索
        </el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="isLoading" :data="historyOpinions">
      <el-table-column
        v-if="false"
        label="活动ID"
        align="center"
        prop="activityId"
        width="60"
      />

      <el-table-column
        label="活动名称"
        align="center"
        prop="activityName"
        width="140"
      />

      <el-table-column
        label="办理人ID"
        align="center"
        prop="assignee"
        width="90"
      />

      <el-table-column
        label="办理人"
        align="center"
        prop="assigneeName"
        width="80"
      />

      <el-table-column label="审批意见" align="center" prop="comment" />

      <el-table-column
        label="开始时间"
        align="center"
        prop="startTime"
        width="160"
      />

      <el-table-column
        label="结束时间"
        align="center"
        prop="endTime"
        width="160"
      />

      <el-table-column
        label="耗时"
        align="center"
        prop="durationInMillis"
        width="150"
      />
    </el-table>
  </section>
</template>

<style lang="scss" scoped>
@import "~@/components/Activiti/ApprovalInfo/styles/var.scss";

.approval-HistoryOpinion-root {
  background-color: $bg-white;
}
</style>
